<template>
	<view class="wrapper">
		<head-title showLeftButton="true" titleText="我的账户" statusColor="linear-gradient(to right,#AE33F6,#6673FF)"></head-title>
		<view class="top" @click="bindDetail">账户明细</view>
		<view class="logo">
			<image src="https://yp.6vx.com/data/sys_img/other_img/myMoney.png"></image>
		</view>
		<view class="money">￥{{msg.balance_money}}</view>
		<view class="detail">你收到的礼物一共折现了<text>{{msg.acc_money}}</text>元</view>
		<view @tap="bindShadow" class="btn on">提现</view>
		<view :class="[shadowShow?'shadow show':'shadow']" @touchmove.stop="shadow">
			<view class='inputBox'>
			    <icon @tap='offShadow' type='clear' size='20' color='#DEDEDE'></icon>
			    <view class='inputTitle'>请输入提现金额</view>
				<view class='input'><input :focus="focus" @input='bindmoney' type='number' maxlength='3' placeholder='输入提现金额' placeholder-class='pla' :value='putForward'></input></view>
			    <view @tap="submit" :class="[putForward!=''?'confirm on btnActive':'confirm']">确认</view>
			</view>
		</view>
	</view>
</template>
<script>
	import headTitle from '../../components/headTitle.vue';
	import common from "../../common/network.js";
	var session = '',maxNum='',minNum='';
	export default {
		components:{headTitle},
		data(){
			return{
				shadowShow:false,withdraw:false,putForward:'',
				msg:'',focus:false,
			}
		},
		onLoad:function(options){
			if(options.session!=undefined){
				session = options.session;
				this.getMsg();
			}
		},
		onShow:function(){
			if(this.msg!=''){
				this.getMsg();
			}
		},
		methods:{
			bindShadow:function(){
				this.shadowShow = true;
				this.focus = true;
			},
			offShadow:function(){
				this.shadowShow = false;
				this.putForward = '';
			},
			shadow:function(){
				return false;
			},
			bindmoney:function(e){
				console.log(e.detail.value);
				this.putForward = e.detail.value;
			},
			submit:function(){
				var that = this;
				var tx_num = this.putForward;
				var banlance = (this.msg).balance_money;
				if(tx_num.replace(/(^\s*)|(\s*$)/g,"")!=""){
					if(parseFloat(tx_num)>parseFloat(banlance)){
						that.showmodel('您的余额不足',function(){
							that.shadowShow = false;
							that.putForward = "";
						});
						return false;
					}else{
						if(parseFloat(tx_num)>=parseFloat(minNum) && parseFloat(tx_num)<=parseFloat(maxNum)){
							uni.getSystemInfo({
								success:function(res){
									var $data = {
										'type':'zinfo_tx_money',
										'session':session,
										'money':that.putForward,
										'brand':res.brand,
										'model':res.model
									};
									common.network.request($data,function(data){
										console.log(data);
										that.getMsg();
										that.showmodel('提现成功,系统将在24小时之类到账！请注意查收',function(){
											that.shadowShow = false;
											that.putForward = "";
										});
									})
								},
							})
						}else{
							that.showmodel(('提现金额必须大于'+minNum+'，小于'+maxNum),function(){});
						}
					}
				}
			},
			showmodel:function(txt,callback){
				uni.showModal({
					content:txt,
					showCancel:false,
					confirmText:'知道了',
					confirmColor:'#6278FF',
					success:function(){
						callback();
					}
				})
			},
			bindDetail:function(){
				uni.navigateTo({
					url:"/pagesA/accountDetail/accountDetail?session="+session
				})
			},
			getMsg:function(){
				var that = this;
				var $data = {
					'type':'zinfo_my_money',
					'session':session,
				};
				common.network.request($data,function(res){
					console.log(res);
					that.msg = res;
					minNum = res.tx_min;
					maxNum = res.tx_max;
				})
			}
		}
	}
</script>

<style scoped>
	.wrapper{
		text-align: center;
	}
	.top{
		color: #6278FF;
		text-align: right;
		padding: 30px;
	}
	.logo{
		height: 150px;
		margin-bottom: 50px;
		margin-top: 20px;
	}
	.logo image{
		width: 150px;
		height: 100%;
	}
	.money{
		padding-bottom: 20px;
		color: #EF2729;
		font-size: 50px;
	}
	.detail{
		font-size: 28px;
	}
	.btn{
		font-size: 34px;
		width: 88%;
		color: #fff;
		margin: auto;
		margin-top: 150px;
		border-radius: 90px;
		height: 90px;
		text-align: center;
		background: #C3C3C3;
		line-height: 90px;
		box-shadow: 0 8px 0 #E5E5E5;
	}
	
	.btn.on{
		background: #6673FF;
		box-shadow: 0 8px 0 #949DFC;
	}
	.btn.on:active{
		box-shadow: 0 2px 0 #949DFC;
		transition: all 0.2s;
		margin-top: 156px;
	}
	/* 提现弹框 */
	.shadow{
	  background: rgba(0, 0, 0, 0.7);
	  width: 100%;
	  height: 100%;
	  position: fixed;
	  top: 0;
	  left: 0;
	  display: none;
	  font-size: 28rpx;
	}
	.shadow.hide{
	  display: none;
	  -webkit-animation: hide 0.4s ease-out forwards; 
	}
	@-webkit-keyframes hide{
	  0%{-webkit-transform: translateY(0)}
	  100%{-webkit-transform: translateY(-100%)}
	}
	.shadow.show{
	  display: block;
	  -webkit-animation: show 0.4s ease-out forwards;
	}
	@-webkit-keyframes show{
	  0%{-webkit-transform: translateY(-100%)}
	  100%{-webkit-transform: translateY(0)}
	}
	.inputBox{
	  width: 80%;
	  padding: 60px 40px;
	  padding-top: 40px;
	  box-sizing: border-box;
	  background: #fff;
	  border-radius: 6px;
	  color: #353535;
	  font-size: 28px;
	  position: absolute;
	  top: 30%;
	  left: 10%;
	}
	.inputBox icon{
	  position: absolute;
	  top: 16px;
	  right: 16px;
	}
	.inputTitle{
	  font-size: 32px;
	}
	.inputBox .input{
	  border: 1px solid #F5F5F5;
	  padding: 12px 15px;
	  margin-top: 30px;
	  border-radius: 4px;
	}
	.confirm{
	  background: rgb(255, 165, 160);
	  color: rgba(255,255,255, 0.9);
	  text-align: center;
	  line-height: 80px;
	  border-radius: 8px;
	  margin-top: 30px;
	}
	.confirm.on{
	  background: rgb(233, 70, 62);
	}
</style>
